Making CI/CD pipeline for various stages of environment (dev/stg/prod) for React APP using Github Actions

Introduction

Hemanth of Alliance Department here. In this blog, I made CI/CD pipeline for various stages of environment (dev/stg/prod) for React APP using Github Actions.

S3

Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.

CloudFront

AWS CloudFront is a content delivery network (CDN) service that aids in the speedy and dependable distribution of static and dynamic information with high performance, security, and developer friendliness. It distributes your content over a global network of edge sites, or data centers that are close to your users. Using serverless compute features, you can also alter the code that is executed at the AWS CDN edge.

Github Actions

Carrying out software development workflows right in your repository using GitHub Actions, a feature of GitHub. To do any activity, including CI/CD, you can find, create, and distribute actions. It is possible to create a completely unique workflow. Additionally, you may develop, test, and deploy your code with GitHub Actions in any language and on any platform. In addition to matrix builds and any language, GitHub Actions supports Linux, macOS, Windows, ARM, and containers.

Demo

Go to IAM and click on add users Enter a username and click on next Keep default settings click on next and then click on create user Now creating policy for each environment, click on create policy first creating policy for dev environment, Click on JSON Now type down the following policy and change the resource to your respective S3 bucket arn and click next Give a policy name and click on create policy Now creating for stg environment, Click on JSON Now type down the following policy and change the resource to your respective S3 bucket arn and click next Give a policy name and click on the create policy Now creating for prod environment, Click on JSON Now type down the following policy and change the resource to your respective S3 bucket arn and click next
Give a policy name and click on the create policy Go back to the user you created and in permission click on add permissions Click on attack policies and select all the above created policies After selecting them click on add permissions In security credentials, click on create access key Select other and click on next Click on the create access key Now go to GitHub, settings click on actions in secrets and variables and then click on new respository secret Enter the following in name and enter the access key id from the above download access keys Same way for the secret access key Now in each of your respective environments create .GitHub/workflow and inside that main.yml file and type down the following code. Note: Type the branch name your current environment is in and enter the respective S3 address Follow for each environment

git add .

git commit -m "created a new create app"

git push

Now check the github actions and you can see the CI/CD in action

Conclusion

Hope with this you get an idea of how to make CI/CD pipeline for various stages of environment (dev/stg/prod) for React APP using Github Actions. Thank you for seeing the blog till the end.